<template>
  <div class="tab">
    <div class="tabs-body">
      <div class="tabs-body-left">
        <div class="left-header">
          <div>
            <el-avatar shape="square" size="large" :src="myuserXx.avatar"></el-avatar>
          </div>

          <el-input style="width: 80%;margin-left: 10%;" v-model="input" size="small " placeholder="请输入内容"></el-input>

        </div>
        <div class="left-body">
          <!-- <buttom></buttom> -->
        </div>
        <div>
          <el-tabs type="border-card">
            <el-tab-pane label="好友消息">
              <div class="left-boot">
                <buttom v-for="(item, index) in message_key" :id="item" :key="index" type="onetoone"
                  @lick="selectMessage">
                </buttom>
              </div>
            </el-tab-pane>
            <el-tab-pane label="群消息">
              <div class="left-boot">
                <buttom v-for="(item, index) in roomMessage_key" :id="item" :key="index" type="room"
                  @lick="selectRoomMessage">
                </buttom>
              </div>
            </el-tab-pane>
            <el-tab-pane label="好友列表">
              <div class="left-boot">
                <buttom v-for="(item, index) in frindesLists" :id="item.frienduserid" :key="index" type="friendList"
                 >
                </buttom>
              </div>
            </el-tab-pane>
            <el-tab-pane label="群列表">
              <div class="left-boot">
                <buttom v-for="(item, index) in rooms" :roomXx="item"  :key="index" type="roomlist"
                 >
                </buttom>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <div class="tabs-body-right">

        <chat v-if="fromid !== ''" :fromid="fromid" :type="chatType"></chat>
      </div>
    </div>
  </div>
</template>
<script>

import buttom from './compents/bodyButton.vue'
import chat from './compents/chatToken.vue'
import { selectFrindes, selectuserMessage,selectuserXx,roomselect,roomselectMessage } from '@api/index/index'
import { mapMutations, mapGetters,mapState } from 'vuex'
export default {
  name: 'indexVive',
  data() {
    return {
      frindesList: [],
      fromid: '',
      myuserXx:{},
      rooms:[],
      chatType:''
    }
  },
  components: { buttom, chat },
  created() {
    const myuserid = sessionStorage.getItem('userid')
    selectFrindes({ myuserid: myuserid }).then(res => {
      if (res.data.type === 'success') {
        console.log(res.data.result);
        this.frindesList=res.data.result
        this.update_frindesLists(res.data.result)
        if (this.frindesList.length !== 0) {
          const data = this.frindesList.map(item => {
            const datas = {
              messageLx: 1,
              from_userid: item.frienduserid,
              to_userid: myuserid
            }
            return datas
          })
          console.log(data);
          selectuserMessage({ list: JSON.stringify(data) }).then(r => {
            this.updateone_oneusermessage(r.data)
          })
        }
      }
    })
    selectuserXx({userid:myuserid}).then(res=>{
      this.myuserXx=res.data[0]
      this.setmyuserXx(res.data[0])
    })
    roomselect({userid:myuserid}).then(res=>{
      this.roomslist(res.data)
      this.rooms=res.data
      console.log(res.data);
      if(res.data.length!==0){
        const list=[]
      res.data.forEach(item => {
        this.$socket.emit('roomjoin',{roomXX:item,userid:myuserid})
        list.push(item.roomid)
      });
      roomselectMessage({data:JSON.stringify(list),userid:myuserid}).then(res=>{
        console.log(res.data);
        this.roomMessage(res.data)
      })
      }
     
    })
  },
  computed: {
    ...mapGetters(['messagekey','roomMessagekey']),
    message_key() {
      return this.messagekey()
    },
    roomMessage_key(){
      return this.roomMessagekey()
    },
    ...mapState({
      frindesLists: state => state.frindesLists
    })
  },
  mounted() {

  },
  methods: {
    ...mapMutations([
      'updateone_oneusermessage',
      'update_frindesLists',
      'setmyuserXx',
      'roomslist',
      'roomMessage'
    ]),
    selectMessage(id) {
      this.fromid = id
      this.chatType='onetoone'
    },
    selectRoomMessage(id){
      this.fromid = id
      this.chatType='rooms'
    }
  },
}
</script>

<style>
.tab {
  height: 100%;
  width: 100%;
  /* border: 1px solid red; */
}

.tabs-body {
  height: 800px;
  margin-top: 50px;
  width: 100%;
  display: flex;
  /* border: 1px solid red; */
}

.tabs-body-left {
  height: 100%;
  width: 30%;
  border: 1px solid red;
}

.tabs-body-right {
  height: 100%;
  width: 70%;
  border: 1px solid black;
  /* overflow-y: scroll; */
}

.left-header {
  width: 100%;
  height: 100px;
  /* border: 1px solid aqua; */
}

.left-body {
  width: 100%;
  height: 50px;
  border: 1px solid red;
}

.left-boot {
  height: 600px;
  overflow-y: scroll;
  width: 100%;
  /* border: 1px solid black; */

}

.left-boot::-webkit-scrollbar {
  width: 0;
}

.el-tabs--border-card>.el-tabs__content {
  padding: 0;
}</style>